<template>
  <drag-dialog title="页面交互配置" v-model="showDialog" @close="close" :close-on-click-modal="false">
    <el-form label-position="right" label-width="120px">
      <el-form-item label="执行操作" v-if="localData.type == 'mounted'">
        <el-select v-model="localData.action" placeholder="请选择" @change="handleActionChange">
          <el-option label="注册接口调用" value="ajax"></el-option>
          <el-option label="模型接口调用" value="ajaxModel"></el-option>
          <el-option label="本地接口调用" value="ajaxLocal"></el-option>
          <el-option label="从已有数据读取(仅作为弹框内页面生效)" value="getData"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模型选择" v-if="localData.action == 'ajaxModel'">
        <el-select v-model="localData.ajaxModel" filterable clearable @change="generateUrlByAjaxModelApi">
          <el-option v-for="opt in ajaxModelList" :key="opt.tableName" :label="`${opt.description}(${opt.tableName})`" :value="opt.tableName" />
        </el-select>
      </el-form-item>
      <el-form-item label="方法选择" v-if="localData.action == 'ajaxModel'">
        <el-select v-model="localData.ajaxApi" filterable clearable @change="generateUrlByAjaxModelApi">
          <el-option v-for="opt in ajaxApiList" :key="opt.dictValue" :label="`${opt.dictLabel}(${opt.dictValue})`" :value="opt.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="接口地址" v-if="localData.action.includes('ajax')">
        <api-selector v-if="localData.action == 'ajax'" v-model="localData.api" />
        <el-tag v-else-if="localData.action == 'ajaxModel'">{{ localData.api }}</el-tag>
        <el-input v-else v-model="localData.api"> </el-input>
      </el-form-item>
      <el-form-item label="请求方式" v-if="localData.action == 'ajaxLocal'">
        <el-radio-group v-model="localData.method">
          <el-radio-button label="POST" value="post" />
          <el-radio-button label="GET" value="get" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="请求体类型" v-if="localData.action == 'ajaxLocal'">
        <el-radio-group v-model="localData.contentType">
          <el-radio-button label="FormData" value="formData" />
          <el-radio-button label="RawJSON" value="rawJson" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="参数配置" v-if="localData.action.includes('ajax')">
        <el-tag>{{ paramsSettedTag }}</el-tag>
        <text-edit-button @click="showParamsSetting = true" />
      </el-form-item>
      <el-form-item label="调用前钩子" v-if="localData.action.includes('ajax')">
        <el-select v-model="localData.hookBefore" filterable clearable>
          <el-option v-for="opt in getPageFuncs" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
        </el-select>
      </el-form-item>
      <el-form-item label="关闭遮罩层" v-if="localData.action.includes('ajax')">
        <el-switch v-model="localData.noLoading" />
      </el-form-item>
      <el-form-item label="调用后钩子">
        <el-select v-model="localData.hookAfter" filterable clearable>
          <el-option v-for="opt in getPageFuncs" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
        </el-select>
      </el-form-item>
      <el-form-item label="返回值jsonPath" v-if="localData.type == 'mounted'">
        <el-input v-model="localData.callbackJsonPath" placeholder="请输入jsonPath" />
      </el-form-item>
      <el-form-item label="表单回填" v-if="localData.type == 'mounted'">
        <el-switch v-model="localData.formFill" />
      </el-form-item>
      <!-- 该字段新版本废弃 -->
      <!-- <el-form-item label="回调方式" v-if="localData.type == 'mounted'">
        <el-select v-model="localData.callback" placeholder="请选择">
          <el-option label="表单回填" value="form"> </el-option>
          <el-option label="组件调用" value="component"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="指令类型" v-if="localData.type == 'iframe'">
        <el-select v-model="localData.iframeType" placeholder="请选择">
          <el-option label="刷新页面" value="refresh"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="组件调用">
        <comp-call-config v-model="localData.compcall" :fields="fields" :options="options" />
      </el-form-item>
    </el-form>

    <life-params-setting v-if="showParamsSetting" v-model="showParamsSetting" :data="localData.params" @submit="handleParamsSubmit" />
    <template #footer>
      <dialog-footer @ok="submit" @cancel="close" />
    </template>
  </drag-dialog>
</template>

<script>
import lifeParamsSetting from './lifeParamsSetting.vue';
import { searchAllMda } from '@uni/api/uni/mda/table/info';

export default {
  components: { lifeParamsSetting },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: false,
      paramsSettedTag: '',
      showParamsSetting: false,
      localData: {},
      option: {
        children: {
          align: 'center',
          headerAlign: 'center',
          column: [
            {
              type: 'input',
              prop: 'key',
              label: 'key'
            },
            {
              type: 'input',
              prop: 'value',
              label: 'value'
            }
          ]
        },
        dynamicType: 'table',
        dynamicModel: 'common',
        widget: true
      },
      ajaxModelList: [],
      ajaxApiList: []
    };
  },
  computed: {
    fields() {
      return this.getCallableCompList(this.options);
    },
    baseUrl() {
      return import.meta.env.VITE_APP_BASE_API;
    },
    getPageFuncs() {
      return this.options.funcs ?? [];
    },
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.showDialog = newVal;
      },
      immediate: true
    },
    showDialog: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    },
    fields: {
      handler(val) {},
      deep: true,
      immediate: true
    },
    data: {
      handler(val) {
        this.localData = val;
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.searchAjaxModel();
    this.searchAjaxApi();
    this.getParamsSettedTag();
  },
  methods: {
    submit() {
      this.$emit('submit', this.localData);
      this.close();
    },
    close() {
      this.showDialog = false;
    },
    generateUrlByAjaxModelApi() {
      this.localData.api = `/uni/mda/${this.localData.ajaxModel}/${this.localData.ajaxApi}`;
    },
    searchAjaxModel() {
      return searchAllMda({isEnable:'Y'}).then((res) => {
        this.ajaxModelList = res.data;
      });
    },
    searchAjaxApi() {
      this.getDicts('uni_mda_rest').then((response) => {
        this.ajaxApiList = response.data;
      });
    },
    handleActionChange(v) {
      this.localData.api = '';
      if (v == 'ajaxModel') {
        this.generateUrlByAjaxModelApi();
      } else if (v == 'ajaxLocal') {
        this.localData.api = this.baseUrl;
      }
    },
    getParamsSettedTag() {
      this.paramsSettedTag = this.isParamsSetted();
    },
    isParamsSetted() {
      if (this.localData.params && Object.keys(this.localData.params).length) {
        const { contantParams, compParams, withFormData } = this.localData.params;
        const strArr = [];
        if (contantParams && contantParams.length) {
          strArr.push('常量参数');
        }
        if (compParams && compParams.length) {
          strArr.push('已有数据参数');
        }
        if (withFormData) {
          strArr.push('已有数据对象');
        }

        return strArr.length ? strArr.join(',') : '未设置';
      } else {
        return '未设置';
      }
    },
    handleParamsSubmit(data) {
      for (let key in data) {
        this.localData.params[key] = data[key];
      }
      this.getParamsSettedTag();
    }
  }
};
</script>
